.search-result-crop {
  position: relative;
  background-color: #EEE;
  height: 240px;
  padding: 0;
  margin-bottom: 8px;
  border-radius: 2px;
  overflow: hidden;

  // Simple hover effect
  @include single-transition(opacity, 0.2s, ease-out);
  opacity: 0.9;
  &:hover {
    opacity: 1;

    .crop-info {
      /* FIXME: Avoid compass gradient for some reason.
         When using compass' background image function,
         linear gradients output an error:
         `Cannot determine the opposite position of: to`, our personal
         method defined in presets doesn't have this issue. see
         https://github.com/FarmBot/OpenFarm/issues/325 */
      @include background-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
      /*@include background-image(linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)));*/
    }
  }

  .crop-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: image-url("leaf-grey-canopy.png");
  }

  .crop-info {
    $padding: 8px;

    display: table;
    width: 100%;
    position: absolute;
    padding: ($padding+40px) ($padding+4px) $padding;
    @include single-transition(background, 0.2s, ease-in);
    /* FIXME: Avoid compass gradient for some reason.
      When using compass' background image function,
      linear gradients output an error:
      `Cannot determine the opposite position of: to`, our personal
      method defined in presets doesn't have this issue. see:
      https://github.com/FarmBot/OpenFarm/issues/325; */
    @include background-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0));
    /*@include background-image(linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)));*/
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;

    .crop-name {
      display: table-cell;
      width: 100%; /* take up as much width as possible */
      margin: 0;
      color: white;
      font-size: 1.2em;
      font-weight: 600;
    }

    .guide-count {
      display: table-cell;
      margin: 0;
      color: rgba(255,255,255,0.9);
      font-weight: 600;
      white-space: pre;
      text-align: right;
      padding-left: ($padding+4px);
    }
  }

  &.new-crop-button {
    @include add-new-button();

    h3 {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    @media #{$small-only} {
      & {
        height: 100px;
      }
    }
  }
}
